iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 15
2
Modern Web

重新認識 CSS系列 第 15

重新認識 CSS - Box model:border

  • 分享至 

  • xImage
  •  

前言

「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加了解 CSS 的原理,讓我在切版的時候可以更加確定自己在做什麼,我踩到的雷只是因為我不夠了解它才會炸開。

在這 30 天的內容中,會將 Spec 內看到的資料整理成這個系列,也希望正在學 CSS 的各位可以更加了解它。另外我也會同時將文章發至我的 Blog,如果想直接看文內的程式碼 Demo 畫面,可以到我的 Blog 來看 ?。

「重新認識 CSS」系列文章發文於:

Border width

border width 屬性指定 border area 的寬度。

border-top-widthborder-right-widthborder-bottom-widthborder-left-width 屬性:

  • initial value:medium
  • computed value:absolute length;如果 border 樣式為 nonehidden,則為 0

border-width 是下列屬性的簡寫屬性:

  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width

此屬性引用的 <border-width> value type 可在以下幾個當中選一個使用:

  • thin
  • medium
  • thick
  • <length>:指定明確的屬性值,border width 不能使用負數

前三個值的解譯 (interpretation) 方式取決於 UA。但是,必須滿足以下關係:thin <= medium <= thick

例如:

h1 { border-width: thin; }               /* thin thin thin thin */
h1 { border-width: thin thick; }         /* thin thick thin thick */
h1 { border-width: thin thick medium; }  /* thin thick medium thick */
h1 { border-width: thin thick medium thin; }  /* thin thick medium thin */

Border color

border color 屬性指定 box 的 border 的顏色。

border-top-colorborder-right-colorborder-bottom-colorborder-left-color 屬性:

  • initial value:color 屬性值
  • computed value:color 屬性的 computed value,否則使用指定的顏色

border-color 是下列屬性的簡寫屬性:

  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color

border-color 屬性設定四個 border 的顏色。value 具有以下含義:

  • <color>:指定顏色值
  • transparent:透明的 border (就算有設定 border 寬度也會是透明的)

如果未使用 border 屬性指定元素的 border 顏色,則 UA 必須使用元素的 color 屬性的值作為 border 顏色的 computed value

例如:實線 (solid) 的 border:

p { 
  color: black; 
  background: white; 
  border: solid;
}

Border style

border 樣式屬性指定 box 的 border 的 line 樣式。

border-top-styleborder-right-styleborder-bottom-styleborder-left-style 屬性:

  • initial value:none,也就是除非有設定 border 樣式,否則不會顯示任何 border
  • computed value:specified value

border-style 是下列屬性的簡寫屬性:

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

此屬性引用的 <border-width> value type 可在以下幾個當中選一個使用:nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset

樣式如下圖:

Demo:Codepen 連結

四個方位的 border 設定

就如之前所說,border-widthborder-colorborder-styleborder 屬性都可以設定 1 至 4 個值,分別代表:

屬性: 上下左右;
屬性: 上下 左右;
屬性: 上 左右 下;
屬性: 上 右 下 左;

例如:

  • 水平 border 為 solid
  • 垂直 border 為 dotted
h1 { border-style: solid dotted; }

詳情可參考我之前寫的「重新認識 CSS - Box model (前傳)」,內有使用 1 至 4 個值的實際範例,因此在此不再追述。

資料來源:


上一篇
重新認識 CSS - Box model (前傳)
下一篇
重新認識 CSS - box-sizing
系列文
重新認識 CSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言